<style>
    #topPool {
        padding: 20px 24px 10px;
    }
    #topPool > div > div > svg {
        display: block;
        height: 280px;
    }
    .poolWrapper {
        border-radius: 5px;
        padding: 5px;
        margin-bottom: 18px;
    }
    .poolLabel {
        font-size: 1.2em;
        text-align: center;
        padding: 4px;
    }
    .poolMinerTable {

    }
    table {
        width: 100%;
    }
    .workers-container{
        max-width: 1160px;
        margin: 0 auto;
        background-color: #fff;
        margin-top: 30px;
        padding: 0 0 10px;
        box-shadow: 0 1px 6px rgba(0,0,0,.117647), 0 1px 4px rgba(0,0,0,.117647);
    }
    .poolMinerTable .pure-table{
        table-layout: fixed;
    }
    .poolMinerTable .pure-table td:first-child,.poolMinerTable .pure-table th:first-child {
        width: 40%;
    }
    .pure-table thead {
        background: #69b9e2;
        color: #fff;
    }
    .pure-table-odd td {
        background-color: #fff;
    }
    .btnDisabled{
        cursor: not-allowed;
    }
</style>
<script type="text/javascript"> 
function searchKeyPress(e)
{
    // look for window.event in case event isn't passed in
    e = e || window.event;
    if (e.keyCode == 13)
    {
        document.getElementById('btnSearch').click();
        return false;
    }
    return true;
}
$(document).ready(function(){
    var str = $(".input-lg").val();
    var str_length=str.length;
    var ret = /^[0-9a-zA-Z]+$/;
    if(str_length==0){
        $('.btn-lg').hover(function(){
            $('.btn-lg').css("cursor", "not-allowed");
            $('.btn-lg').attr('disabled',"true");
        });
    };
    $('.input-lg').bind('input propertychange', function(){
        var str = $(".input-lg").val();
        var str_length=str.length;
        var ret = /^[0-9a-zA-Z]+$/;
        if(str_length>30 && str_length<45){
            if(ret.test(str)){
                $('.btn-lg').hover(function(){
                    $('.btn-lg').css("cursor", "pointer");
                    $('.btn-lg').removeAttr("disabled");
                });
                $('.btn-lg').removeAttr("disabled");
                $('.btn-lg').one('click',function(){
                    window.location = "miners/" + $('.input-lg').val();
                });
            }else{
//					  	alert('请输入正确的地址！');
                $('.btn-lg').hover(function(){
                    $('.btn-lg').css("cursor", "not-allowed").attr('disabled',"true");
                });
            };
        }else{
//				  	alert('请输入正确的地址！');
            $('.btn-lg').hover(function(){
                $('.btn-lg').css("cursor", "not-allowed").attr('disabled',"true");
            });
        }
    });
});


</script>

<div class="workers-container">

{{ function capitalizeFirstLetter(t){return t.charAt(0).toUpperCase()+t.slice(1)} }}
{{ var i=0; for(var pool in it.stats.pools) { }}
<div id="topPool">
    <div class="poolWrapper">
        <div class="poolLabel">
			<span style="float:right; margin-bottom: 8px;">
				<small class="workersT1"> Mining Rig:</small>
				<input type="text" class="form-control input-lg searchBox" onkeypress="return searchKeyPress(event); ">
				<span class="input-group-btn">
						<button class="btn btn-default btn-lg workersT7" type="button" id="btnSearch">Search</button>
				</span>
			</span>
            <span style="float: left">
            {{=capitalizeFirstLetter(it.stats.pools[pool].name)}} <small class="workersT2">Top Miners</small>
			<span style="margin-left: 30px">
                <i class="fa fa-users"></i> <span id="statsMiners{{=pool}}">{{=it.stats.pools[pool].minerCount}}</span> <small class="workersT8">Miners</small>
            </span>
            <span>
                <i class="fa fa-rocket"></i> <span id="statsWorkers{{=pool}}">{{=it.stats.pools[pool].workerCount}}</span> <small class="workersT9">Mining Rig</small>
            </span>
            <span>
                <i class="fa fa-cog"></i> <span id="statsWorkers{{=pool}}">{{=it.stats.pools[pool].shareCount}}</span> <small class="workersT10">Shares</small>
            </span>
            </span>
		</div>
        <div class="poolMinerTable">
            <table class="pure-table">
                <thead>
                <tr>
                    <th class="workersT3">Address</th>
                    <th class="workersT4">Shares</th>
                    <th class="workersT5">Efficiency</th>
                    <th class="workersT6">Hashrate</th>
                    <th class="workersT11">Active Mining Rig</th>
                </tr>
                </thead>
                {{ for(var worker in it.stats.pools[pool].miners) { }}
                {{var workerstat = it.stats.pools[pool].miners[worker];}}
                <tr class="pure-table-odd">
                    <td class="td-adress"><a href="/miners/{{=worker.split('.')[0]}}">{{=worker}}</a></td>
                    <td>{{=Math.round(workerstat.currRoundShares * 100) / 100}}</td>
                    <td>{{? workerstat.shares > 0}} {{=Math.floor(10000 * workerstat.shares / (workerstat.shares + workerstat.invalidshares)) / 100}}% {{??}} 0% {{?}}</td>
                    <td>{{=workerstat.hashrateString}}</td>
                    <td id="{{=worker}}"></td>
                </tr>
                {{ } }}
            </table>
        </div>
    </div>
</div>
{{ } }}

</div>
<script>
    var payData = {{=JSON.stringify(it)}};
    var data = JSON.parse(JSON.stringify(payData));
    var workderNum = [];
    for(var worker in data.stats.pools.ulord.workers) {
        var name = worker.split('.')[0];
        // console.log(name);
        if(!workderNum[name]) {
            workderNum[name] = 1;
        } else {
            ++workderNum[name];
        }
    }
    for(var j in workderNum) {
        $("#" + j).html(workderNum[j]);
    }
    // console.log(workderNum);
</script>